<template>
  <div class="create-container">
    <div class="right-container">
      <!---->
      <el-form :inline="true" status-icon label-position="right" class="demo-form-inline"
               label-width="150px" style="display: flex;">
        <div>
          <el-form-item label="所属用户登录名称：" prop="useName">
            <el-input v-model="listQuery.useName" placeholder="所属用户登录名称"/>
          </el-form-item>
          <el-form-item label="注册开始日期：" prop="regStartDate">
            <el-date-picker
              v-model="listQuery.regStartDate"
              type="date"
              placeholder="注册开始日期"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="统一信用代码：" prop="unicode">
            <el-input v-model="listQuery.unicode" placeholder="统一信用代码"/>
          </el-form-item>
          <el-form-item label="注册结束日期：" prop="regEndDate">
            <el-date-picker
              v-model="listQuery.regEndDate"
              type="date"
              placeholder="注册结束日期"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="公司名称：" prop="companyName">
            <el-input v-model="listQuery.companyName" placeholder="公司名称"/>
          </el-form-item>
          <el-form-item label="法人姓名：" prop="legalName">
            <el-input v-model="listQuery.legalName" placeholder="法人姓名"/>
          </el-form-item>
          <el-form-item>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="queryList">查询</el-button>
          </el-form-item>
        </div>
      </el-form>

      <el-table v-loading="listLoading" :data="list" ref="cargoTable" element-loading-text="正在查询中。。。" border fit highlight-current-row
                :header-cell-style="{background:'#F2F2F2',color:'#666'}">
        <el-table-column align="left" min-width="100" label="统一信用代码" prop="unicode"/>
        <el-table-column align="left" min-width="120" label="公司名称" prop="companyName"/>
        <el-table-column align="left" min-width="80" label="所属用户名称" prop="userName"/>
        <el-table-column align="left" min-width="80" label="中征码" prop="loanCardNo"/>
        <el-table-column align="left" min-width="180" label="公司详细地址" prop="address"/>
        <el-table-column align="center" label="操作" width="120" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="text" size="mini" plain
                       @click="handleEdit(scope.row)">查看详情
            </el-button>
          </template>
        </el-table-column>
        <el-table-column type="expand" width="1">
          <template slot-scope="scope">
            <el-form label-position="left" class="demo-table-expand" label-width="180px" style="display: flex">
              <div style="flex: 1">
                <el-form-item label="中征码：" style="margin: 0">
                  <span>{{ scope.row.loanCardNo }}</span>
                </el-form-item>
                <el-form-item label="公司名称：" style="margin: 0">
                  <span>{{ scope.row.companyName }}</span>
                </el-form-item>
                <el-form-item label="邮政编码：" style="margin: 0">
                  <span>{{ scope.row.postcode }}</span>
                </el-form-item>
                <el-form-item label="统一信用代码：" style="margin: 0">
                  <span>{{ scope.row.unicode }}</span>
                </el-form-item>
                <el-form-item label="所属用户名称：" style="margin: 0">
                  <span>{{ scope.row.userName }}</span>
                </el-form-item>
                <el-form-item label="公司所在省份：" style="margin: 0">
                  <span>{{ scope.row.province }}</span>
                </el-form-item>
                <el-form-item label="公司详细地址：" style="margin: 0">
                  <span>{{ scope.row.address }}</span>
                </el-form-item>
                <el-form-item label="行业分类：" style="margin: 0">
                  <span>{{ scope.row.industry }}</span>
                </el-form-item>
                <el-form-item label="企业类型：" style="margin: 0">
                  <span>{{ scope.row.typeCode }}</span>
                </el-form-item>
                <el-form-item label="企业细类：" style="margin: 0">
                  <span>{{ scope.row.detailCode }}</span>
                </el-form-item>
                <el-form-item label="企业所在城市：" style="margin: 0">
                  <span>{{ scope.row.city }}</span>
                </el-form-item>
                <el-form-item label="执照证件注册日期：" style="margin: 0">
                  <span>{{ scope.row.certRegDate }}</span>
                </el-form-item>
                <el-form-item label="执照证件到期日期：" style="margin: 0">
                  <span>{{ scope.row.certExpiryDate }}</span>
                </el-form-item>
              </div>
              <div style="flex: 1">
                <el-form-item label="法人姓名：" style="margin: 0">
                  <span>{{ scope.row.legalName }}</span>
                </el-form-item>
                <el-form-item label="法人手机号：" style="margin: 0">
                  <span>{{ scope.row.legalMobile }}</span>
                </el-form-item>
                <el-form-item label="法人证件号码：" style="margin: 0">
                  <span>{{ scope.row.legalID }}</span>
                </el-form-item>
                <el-form-item label="法人证件登记日期：" style="margin: 0">
                  <span>{{ scope.row.legalIDRegDate }}</span>
                </el-form-item>
                <el-form-item label="法人证件到期日期：" style="margin: 0">
                  <span>{{ scope.row.legalIDExpiry }}</span>
                </el-form-item>
                <el-form-item label="法人证件签发城市：" style="margin: 0">
                  <span>{{ scope.row.legalIDCity }}</span>
                </el-form-item>
                <el-form-item label="添加时间：" style="margin: 0">
                  <span>{{ scope.row.timeAdd }}</span>
                </el-form-item>
                <el-form-item label="签约状态：" style="margin: 0">
                  <!--<span>{{ scope.row.signed | statusFilter}}</span>-->
                  <el-tooltip class="item" effect="light" placement="right">
                    <div slot="content">
                      <el-form label-position="right" class="demo-table-expand" label-width="130px" v-for="item,index in scope.row.signed" :key="index">
                        <el-form-item label="签约银行名称：" style="margin: 0">
                          <span>{{ item.bankCode | bankCodeFilter}}</span>
                        </el-form-item>
                        <el-form-item label="签约状态：" style="margin: 0">
                          <span>{{ item.status | statusFilter}}</span>
                        </el-form-item>
                        <el-form-item label="申请时间：" style="margin: 0">
                          <span>{{ item.timeModify }}</span>
                        </el-form-item>
                      </el-form>
                    </div>
                    <el-button type="warning" plain>查看签约状态</el-button>
                  </el-tooltip>
                </el-form-item>
                <el-form-item label="签约银行：" style="margin: 0">
                  <span>{{ scope.row.bankCode | bankCodeFilter }}</span>
                </el-form-item>
                <el-form-item label="申请时间：" style="margin: 0">
                  <span>{{ scope.row.timeModify }}</span>
                </el-form-item>
                <el-form-item label="状态：" style="margin: 0">
                  <span>{{ scope.row.status | statusFilter }}</span>
                </el-form-item>
                <el-form-item label="驳回原因：" style="margin: 0">
                  <span>{{ scope.row.rejectReason }}</span>
                </el-form-item>
              </div>
            </el-form>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
                  @pagination="queryList" style="margin: 0"/>

    </div>
  </div>
</template>

<script>
import {doGet, doPost} from '@/api'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'usersearch',
  components: { Pagination },
  filters: {
    statusFilter(val) {
      return { '0': '签约成功', '1': '待审核', '2': '已驳回', '3': '历史客户，已开户', '4': '审核中', '-1': '失败' }[val]
    },
    bankCodeFilter(val) {
      return { '0000': '富民银行', '0001': '网商银行', '0002': '振兴银行' }[val]
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        regStartDate: undefined,
        regEndDate: undefined,
        useName: undefined,
        unicode: undefined,
        companyName: undefined,
        legalName: undefined
      },
      listLoading: true,
    }
  },
  created() {
    this.queryList()
  },
  methods: {
    queryList() {
      this.listLoading = true
      doGet('companysearch.html?op=search', this.listQuery).then(response => {
        this.list = response.rows
        this.total = response.data.totalcount
        this.listLoading = false
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },
    handleEdit(row) {
      let $table = this.$refs.cargoTable;
      this.list.map(item => {
        if (row.id != item.id) {
          $table.toggleRowExpansion(item, false)
        }
      })
      $table.toggleRowExpansion(row)
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
